<template>
  <div>
    <el-table ref="dataTable"
              style="font-size: 17px"
              :data="dataSource.list || []"
              :height="tableHeight"
              :stripe="options.stripe"
              :border="options.border"
              header-row-class-name="table-header-row"
              highlight-current-row
              @row-click="handleRowClick"
              @selection-change="handleSelectionChange">
      <!--selection选择框-->
      <el-table-column v-if="options.selectType && options.selectType == 'checkbox'"
                       type="selection"
                       width="50"
                       text-align="center"></el-table-column>
      <!--序号-->
      <el-table-column v-if="options.showIndex"
                       label="序号"
                       type="index"
                       width="60"
                       text-align="center"></el-table-column>
      <!--数据列-->
      <template v-for="(column, index) in columns">
        <template v-if="column.scopedSlots">
          <el-table-column :key="index"
                           :prop="column.prop"
                           :label="column.label"
                           :align="column.align || 'left'"
                           :width="column.width">
            <template #default="scope">
              <slot :name="column.scopedSlots"
                    :index="scope.$index"
                    :row="scope.row">
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column :key="index"
                           :prop="column.prop"
                           :label="column.label"
                           :align="column.align || 'left'"
                           :width="column.width"
                           :fixed="column.fixed">
          </el-table-column>
        </template>
      </template>
    </el-table>
    <!-- 分页 -->
    <div class="pagination"
         v-if="showPagination">
      <!-- <el-pagination v-if="dataSource.list.length > 0"
                     background
                     :total="dataSource.list.length"
                     :page-sizes="[15, 30, 50, 100]"
                     :page-size="15"
                     v-model:current-page="currentPage"
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handlePageSizeChange"
                     @current-change="handlePageNoChange"
                     style="text-align: right"></el-pagination> -->
      <el-pagination v-if="dataSource.list.length > 0"
                     background
                     :total="dataSource.list.length"
                     :page-size="10"
                     v-model:current-page="currentPage"
                     layout="total, prev, pager, next, jumper"
                     @current-change="handlePageNoChange"
                     style="text-align: right"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  props: {
    dataSource: {
      type: Object,
      required: true
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    options: {
      type: Object,
      default: () => ({
        extHeight: 0,
        showIndex: false
      })
    },
    columns: {
      type: Array,
      required: true
    },
    fetch: {
      type: Function,
      required: true
    },
    initFetch: {
      type: Boolean,
      default: true
    }
  },
  emits: ['rowSelected', 'rowClick'],
  data() {
    return {
      radioSelectRowIndex: null,
      topHeight: 60 + 20 + 30 + 46,
      tableHeight: null,
      dataTable: null,
      currentPage: 1,
      pageSize: 10,
    }
  },
  // computed: {
  //   pagenatedData() {
  //       const startIndex = (this.currentPage - 1) * this.pageSize
  //       const endIndex = startIndex + this.pageSize
  //       return this.dataSource.list.slice(startIndex,endIndex)

  //   }
  // },
  created() {
    this.init()
  },
  mounted() {
    this.tableHeight = this.options.tableHeight
        ? this.options.tableHeight
        : (window.innerHeight - this.topHeight - this.options.extHeight)/2
  },
  methods: {
    handleRowClick(row) {
      this.$emit('rowClick', row)
    },
    handleSelectionChange(row) {
      const selectedIds = row.map(row => row.id);
      this.$emit('rowSelected', selectedIds)
    },
    // handlePageSizeChange(size) {
    //   this.fetch()
    // },
    handlePageNoChange(pageNo) {
      this.currentPage = pageNo
      this.$emit('pageNoChange', pageNo)
      this.fetch()
    },
    setCurrentRow(rowKey, rowValue) {
      const row = this.dataSource.list.find(item => item[rowKey] === rowValue)
      this.dataTable.setCurrentRow(row)
    },
    init() {
      if (this.initFetch && this.fetch) {
        this.fetch()
      }
    }
  }
}
</script>

<style lang="scss">
.pagination {
  padding-top: 10px;
}
.el-pagination {
  justify-content: right;
}

.el-table__body tr.current-row > td.el-table__cell {
  background-color: #e6f0f9;
}

.el-table__body tr:hover > td.el-table__cell {
  background-color: #e6f0f9 !important;
}
</style>